<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" id="favicon" href="${path}/imgs/index/favicon.ico" type="image/x-icon">
    <title>优惠券</title>
    <link rel="stylesheet" href="${path}/plugins/layui/css/layui.css">
    <!-- 引入bootstrap.css - 开发环境/bootstrap.min.css - 生产环境-->
    <link rel="stylesheet" href="${path}/plugins/bootstrap-3.4.1-dist/css/bootstrap.css">
    <!-- 引入登录所需要的h+ -->
    <link href="${path}/plugins/Hplus/css/font-awesome.css" rel="stylesheet">
    <link href="${path}/plugins/Hplus/css/animate.css" rel="stylesheet">
    <link href="${path}/plugins/Hplus/css/style.css" rel="stylesheet">
    <link rel="stylesheet" href="${path}/css/index/index.css">
    <link rel="stylesheet" href="${path}/css/personal/personal.css">
    <link rel="stylesheet" href="${path}/css/order/order.css">
    <link rel="stylesheet" href="${path}/css/coupon/Coupon.css">

</head>
<body>
<%@include file="../nav/navbarheader.jsp"%>
<input type="hidden" name="userIdHid" value="${user.id}">
    <div class="container-fluid myorder" style="height: auto">
        <div class="ordercontainer">
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
                <legend style="padding: 10px;">我的优惠券</legend>
            </fieldset>

            <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                <ul class="layui-tab-title">
                    <li class="layui-this">可领取</li>
                    <li>待使用</li>
                    <li>已使用</li>
                    <li>已过期</li>
                </ul>
                <div class="layui-tab-content layui-anim layui-anim-scale" >

                    <div class="layui-tab-item layui-show" >
                            <h2>可领取以下优惠券：</h2>
                        <!-- 可领取 -->
                        <div class="contact-box layui-anim layui-anim-upbit"  id="receive">
                            <div>
                                <div id="commentZanCoupon">
                                </div>
                                <div  id="commentCoupon">
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 待使用 -->
                    <div class="layui-tab-item">
                        <div class="contact-box  layui-anim layui-anim-up"  id="using">
                        </div>
                    </div>
                    <!-- 已使用 -->
                    <div class="layui-tab-item">
                        <div class="contact-box  layui-anim layui-anim-scale" id = "used">
                        </div>
                    </div>
                    <!-- 已过期 -->
                    <div class="layui-tab-item">
                        <div class="contact-box layui-anim layui-anim-fadein" id = "outdate">

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 底部导航 -->
    <div class="bottom">
        <div class="bottominner">
            <div class="btmlogo">
                <img src="${path}/imgs/index/bottomicon.svg" alt="">
            </div>
            <div class="btmc1">
                © 2022 TripAdvisor LLC 保留所有权利。<br>
                <ul>
                    <li><a href="">使用条款</a></li>
                    <li><a href="">隐私和Cookie声明</a></li>
                    <li><a href="">同意使用Cookie</a></li>
                    <li><a href="">网站地图</a></li>
                    <li><a href="">网站工作原理</a></li>
                </ul>
                <div class="btmc1-1">
                    网站的此版本通常面向中文使用者，除非有针对其国家或地区的特定网站版本存在。 您可以使用下拉式菜单访问 Tripadvisor 网站面向特定国家或地区的其他版本。
                    <a href="">更多</a>
                </div>
            </div>
        </div>

    </div>

    <script src="${path}/plugins/jquery.min.js"></script>
    <script src="${path}/js/index/index.js"></script>
    <script src="${path}/plugins/layui/layui.js"></script>
    <script src="${path}/plugins/bootstrap-3.4.1-dist/js/bootstrap.js"></script>
<script>
    $(function () {
        let userId = $("input[name='userIdHid']").val();
        $.ajax({
            type: 'post',
            <%--url: '/fr/coupon/findAllZan/<%=((com.second.model.pojo.FUser)session.getAttribute("user")).getId()%>',--%>
            url: '/fr/coupon/findAllZan/'+userId+'',

            success:function (data) {
                console.log(data);
                let list = eval(data);
                let str = "";
                let str1 = "";
                if(null != data && "" != data){
                    $.each(list, function (idx, item) {
                        str1 = " 恭喜您点赞达标，可以领取如下优惠券： <br>" ;
                        str +=
                            "               <div class=\"coupon coupon-yellow \">\n" +
                            "                       <div class=\"coupon-info coupon-wave-right \">" +
                            "                          <div class=\"coupon-price\"> ¥" + item.quota + " </div>\n" +
                            "                             <div class=\"coupon-desc\"> " + item.name + "</div>\n" +
                            "                            <div class=\"coupon-expiry-date\">有效时间至" + item.effectiveDays + "</div> \n" +
                            "                       </div>" +
                            "                    <div class=\"coupon-get\"> \n" +
                            "                            <a href='/fr/coupon/receive/" + userId + "/" + item.id + "'>立即领取</a> \n" +

                            "                    </div>\n" +
                            "                    </div>\n";
                    })

                }
                else{
                        str +=
                            "               <div >\n" +
                            "您点赞达十条可以领取更多优惠券哦\n"+
                            "                    </div>\n";
                }

                $("#commentZanCoupon").html(str1+str);
            }
        })
    });
    $(function () {
        let userId = $("input[name='userIdHid']").val();
        $.ajax({
            type: 'post',
            <%--url: '/fr/coupon/findAllZan/<%=((com.second.model.pojo.FUser)session.getAttribute("user")).getId()%>',--%>
            url: '/fr/coupon/findAllComment/'+userId+'',
            success:function (data) {
                console.log(data);
                let list = eval(data);
                let str = "";
                let str1 = "";
                if(null != data && "" != data){
                    $.each(list, function (idx, item) {
                        str1 = "<div> 恭喜您评论达标，可以领取如下优惠券：</div>\n" ;
                        str +=
                            "               <div class=\"coupon coupon-yellow \">\n" +
                            "                       <div class=\"coupon-info coupon-wave-right \">" +
                            "                          <div class=\"coupon-price\"> ¥" + item.quota + " </div>\n" +
                            "                             <div class=\"coupon-desc\"> " + item.name + "</div>\n" +
                            "                            <div class=\"coupon-expiry-date\">有效时间至" + item.effectiveDays + "</div> \n" +
                            "                       </div>" +
                            "                    <div class=\"coupon-get\"> \n" +
                            "                            <a href='/fr/coupon/receive/" + userId + "/" + item.id + "'>立即领取</a> \n" +
                            "                    </div>\n" +
                            "                    </div>\n";
                    })
                }
                else{
                    str +=
                        "               <div >\n" +
                        "您评论达五条可以领取更多优惠券哦！\n"+
                        "                    </div>\n";
                }

                $("#commentCoupon").html(str1+str);
            }
        })
    });

    $(function () {
        let userId = $("input[name='userIdHid']").val();
        $.ajax({
            type: 'post',
            <%--url: '/fr/coupon/<%=((com.second.model.pojo.FUser)session.getAttribute("user")).getId()%>',--%>
            url: '/fr/coupon/'+userId+'',
            success:function (data) {
                let list = eval(data.data)
                let str ="";
                $.each(list,function (idx,item) {
                    console.log("item->",item)
                    str +=
                        "                    <div class=\"coupon coupon-yellow2 \">\n" +
                        "                       <div class=\"coupon-info coupon-wave-right \">"+
                        "                          <div class=\"coupon-price\"> ¥"+item.quota+" </div>\n" +
                        "                             <div class=\"coupon-desc\"> "+item.name+"</div>\n" +
                        "                            <div class=\"coupon-expiry-date\">有效时间至"+item.effectiveDays+"</div> \n" +
                        "                       </div>" +
                        "                    <div class=\"coupon-get\"> \n" +
                        "                           <span >使用</span> \n" +
                        "                    </div>\n" +
                        "                    </div>\n";
                })
                $("#using").html(str);
            }
        })
    });

    $(function () {
        let userId = $("input[name='userIdHid']").val();
        $.ajax({
            type: 'post',
            url: '/fr/coupon/couponused/'+userId+'',
            success:function (data) {
                let list = eval(data)
                let str ="";
                if(null != data && "" != data) {
                    $.each(list, function (idx, item) {
                        console.log("item->", item)
                        str +=
                            "                    <div class=\"coupon coupon-yellow3 \">\n" +
                            "                       <div class=\"coupon-info coupon-wave-right \">" +
                            "                          <div class=\"coupon-price\"> ¥" + item.quota + " </div>\n" +
                            "                             <div class=\"coupon-desc\"> " + item.name + "</div>\n" +
                            "                            <div class=\"coupon-expiry-date\">有效时间至" + item.effectiveDays + "</div> \n" +
                            "                       </div>" +
                            "                    <div class=\"coupon-get\"> \n" +
                            "                           <span >已使用</span> \n" +
                            "                    </div>\n" +
                            "                    </div>\n";
                    })
                }
                else {
                    str +=
                        "                    <div >\n" +
                        "暂时没有已使用优惠券哦！可前去领取！\n"+
                        "                    </div>\n";
                }
                $("#used").html(str);
            }
        })
    });

    $(function () {
        let userId = $("input[name='userIdHid']").val();
        $.ajax({
            type: 'post',
            url: '/fr/coupon/outdate/'+userId+'',
            success:function (data) {
                let list = eval(data)
                let str ="";
                if(null != data && "" != data) {
                    $.each(list, function (idx, item) {
                        console.log("item->", item)
                        str +=
                            "                    <div class=\"coupon coupon-yellow4 \">\n" +
                            "                       <div class=\"coupon-info coupon-wave-right \">" +
                            "                          <div class=\"coupon-price\"> ¥" + item.quota + " </div>\n" +
                            "                             <div class=\"coupon-desc\"> " + item.name + "</div>\n" +
                            "                            <div class=\"coupon-expiry-date\">有效时间至" + item.effectiveDays + "</div> \n" +
                            "                       </div>" +
                            "                    <div class=\"coupon-get\"> \n" +
                            "                           <span >已过期</span> \n" +
                            "                    </div>\n" +
                            "                    </div>\n";
                    })
                }
                else {
                    str +=
                        "                    <div >\n" +
                        "暂时没有已过期优惠券哦！\n"+
                        "                    </div>\n";
                }
                $("#outdate").html(str);
            }
        })
    });

</script>
</body>
</html>